<template>
  <div class="app-container">
    <el-form :model="formInline" class="form-inline" ref="form" label-width="90px">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="4"><el-form-item label="公司名称">
            <el-select clearable filterable v-model="formInline.customerId" style="width: 100%">
              <el-option v-for="(item, index) of accountList" :key="index" :label="item.enterpriseName" :value="item.customerId">{{
                item.enterpriseName }}</el-option>
            </el-select></el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item class="aaa" label="手机号（账号）" style="width: 100%">
            <el-input v-model="formInline.phonenumber" placeholder="手机号（账号）"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="支付状态" style="width: 100%">
            <el-select clearable v-model="formInline.payStatus" style="width: 100%">
              <el-option label="待支付" :value="1">待支付</el-option>
              <el-option label="支付成功" :value="2">支付成功</el-option>
              <el-option label="支付失败" :value="3">支付失败</el-option>
            </el-select>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="消费类别" style="width: 100%">
            <el-select clearable v-model="formInline.expenseType" style="width: 100%">
              <el-option label="充值" :value="1">充值</el-option>
              <el-option label="消费" :value="2">消费</el-option>
              <el-option label="提现" :value="3">提现</el-option>
            </el-select>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="交易类型" style="width: 100%">
            <el-select clearable v-model="formInline.tradeType" style="width: 100%">
              <el-option label="微信" :value="1">微信</el-option>
              <el-option label="支付宝" :value="2">支付宝</el-option>
              <el-option label="银联" :value="3">银联</el-option>
              <el-option label="余额" :value="4">余额</el-option>
              <el-option label="手动" :value="5">手动</el-option>
            </el-select>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item class="aaa" label="交易号(微信、支付宝)" style="width: 100%">
            <el-input v-model="formInline.payTradeNo" placeholder="交易号(微信、支付宝)"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item class="aaa" label="交易号(自定义)" style="width: 100%">
            <el-input v-model="formInline.tradeNo" placeholder="交易号(自定义)"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="订单号" style="width: 100%">
            <el-input v-model="formInline.orderNum" placeholder="订单号"></el-input> </el-form-item></el-col>

        <el-col :lg="6" :xl="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button type="primary" :disabled="!tableData.length" @click="downloadExcel">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData">
      <el-table-column align="center" prop="phonenumber" label="手机号（账号）"></el-table-column>
      <el-table-column align="center" prop="enterpriseName" label="公司名称"></el-table-column>
      <el-table-column align="center" prop="payStatus" label="支付状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus == '1'">待支付</el-tag>
          <el-tag v-if="scope.row.payStatus == '2'" type="sunness">支付成功</el-tag>
          <el-tag v-if="scope.row.payStatus == '3'" type="warning">支付失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="expenseType" label="消费类别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.expenseType == '1'">充值</el-tag>
          <el-tag v-if="scope.row.expenseType == '2'" type="sunness">消费</el-tag>
          <el-tag v-if="scope.row.expenseType == '3'" type="warning">提现</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tradeType" label="交易类型">
        <template slot-scope="scope">
          <div>
            {{
      scope.row.tradeType * 1 === 1
        ? "微信"
        : scope.row.tradeType * 1 === 2
          ? "支付宝"
          : scope.row.tradeType * 1 === 3
            ? "银联"
            : scope.row.tradeType * 1 === 4
              ? "余额"
              : scope.row.tradeType * 1 === 5
              ? "手动" : ""
    }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="money" label="发生金额"></el-table-column>
      <el-table-column align="center" prop="payTradeNo" label="交易号(微信支付宝自带交易号)"></el-table-column>
      <el-table-column align="center" prop="tradeNo" label="交易号(自定义的交易号)"></el-table-column>
      <el-table-column align="center" prop="orderNum" label="订单号（买保险的订单号）"></el-table-column>

      <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>
<script>
import { getLabel } from "@/utils/func.js";
import { tradeType, payStatus, expenseType } from "@/utils/options";
import moment from "moment";
export default {
  data() {
    return {
      accountList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      formInline: {
        payStatus: "",
        tradeType: "",
        expenseType: "",
        payTradeNo: "",
        tradeNo: "",
        orderNum: "",
        phonenumber: "",
        enterpriseName: "",
      },
      tableData: [],
      tableHeight: 0,
      getLabel,
      tradeType,
      payStatus,
      expenseType,
    };
  },
  methods: {
    downloadExcel() {
      const params = {
        ...this.formInline,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      const date = moment().format("YYYY-MM-DD HH:mm:ss");
      // 发送请求获取Excel文件流
      this.download(
        "/wallet/expense/exportExpense",
        {
          ...params,
        },
        `明细管理${date}.xls`
      );
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData();
    },
    setTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 180 + "px";
      });
    },
    getTableData() {
      this.$get("/wallet/expense/list", {
        ...this.formInline,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      }).then((res) => {
        this.tableData = res.rows;
        this.page.total = res.total;
      });
    },
    getAccountList() {
      const params = {
        pageNum: this.page.pageNum,
        pageSize: 99999,
      };
      this.$get("/system/customer/checklist", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.accountList = res.data;
        } else {
          this.accountList = [];
        }
      });
    },
  },
  mounted() {
    window.onresize = () => {
      this.setTableHeight();
    };
    if (this.$route.query.customerId) {
      this.formInline.customerId = Number(this.$route.query.customerId)
    }
    this.setTableHeight();
    this.getTableData();
    this.getAccountList()
  },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
  width: 100%;

  .aaa{
    .el-form-item__label {
    line-height: 18px;
  }
  }
  
}
</style>